<template>
  <div>
    <el-container>
      <el-header>
        <el-menu router
          :default-active="$route.path" route:default-active="true"  class="el-menu-vertical-demo"  mode="horizontal" >
        <el-menu-item v-for="item in noChildren()" :key="item.name" :index="item.name" >
            <component :is="item.icon" style="width: 18px;height: 18px;"></component>
            <template #title>{{item.label}}</template>
        </el-menu-item>
        <el-sub-menu v-for="item in hasChildren()" :key="item.name" :index="item.label">
            <template #title>
                <span>{{item.label}}</span>
            </template>
            <el-menu-item-group v-for="subItem in item.children" :key="subItem.name">
            <el-menu-item :index="subItem.name">{{subItem.label}}</el-menu-item>
           </el-menu-item-group>
        </el-sub-menu>
    </el-menu>
      </el-header>
      <el-main>？？？</el-main>
      <el-footer>其他</el-footer>
    </el-container>
  </div>
  </template>
<script>
export default {
  // 组件名称
  name: 'IndexView  ',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {},
  // 组件状态值
  data () {
    return {
      menuData:[
        {
          name: "/",
          label: "视频",
        },
        {
          name: "/",
          label: "题库",
        },
        {
          name: "/",
          label: "考试",
          children:[
            {
              name: "/",
              label: "自测",
            },
            {
              name: "/",
              label: "成绩查询",
            },
          ]
        },
        {
          name: "/",
          label: "案例分析",
        },
        {
          name: "/",
          label: "培训",
          children:[
            {
              name: "/",
              label: "入职培训",
            },
            {
              name: "/",
              label: "每周一题",
            },
          ]
        },
        {
          name: "/",
          label: "合理化建议",
        },
        {
          name: "/",
          label: "荣誉墙",
        },
        {
          name: "/",
          label: "积分系统",
        },
        {
          name: "/",
          label: "我的收藏",
        },
      ]
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    noChildren (){
      return this.menuData.filter((item) => !item.children)
     },
     hasChildren(){
      return this.menuData.filter((item) => item.children)
     }
  }
}
</script>

<style scoped>

</style>
